﻿<!--
> Muaz Khan     - https://github.com/muaz-khan 
> MIT License   - https://www.webrtc-experiment.com/licence/
> Experiments   - https://github.com/muaz-khan/WebRTC-Experiment
-->
<!DOCTYPE html>
<html id="home" lang="en">

    <head>
        <title>How to share files using WebRTC Data Channel (SCTP/RTP) API? | Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
        <style>
            p { padding: .8em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            td {
                border: 0;
                padding: 0;
            }
        </style>
        <!-- for HTML5 el styling -->
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>

        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_main.min.js"> </script>
        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_javascript.min.js"> </script>
        <script type="text/javascript" src="https://cdn.webrtc-experiment.com/syntax/sh_html.min.js"> </script>
        <link type="text/css" rel="stylesheet" href="https://cdn.webrtc-experiment.com/syntax/sh_style.css">
    </head>

    <body onload="sh_highlightDocument();">
        <article>
            <header style="text-align: center;">
                <h1>How to <a href="https://www.webrtc-experiment.com/file-hangout/" target="_blank">share files</a> using <a href="https://www.webrtc-experiment.com/">WebRTC</a> Data Channel (RTP/SCTP) APIs?
                </h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                        
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                        
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                        
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>
            
            <div class="github-stargazers"></div>

            <blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px;">
                This tutorial is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated (written in 2013)</span>. Please check this tutorial instead: <a href="https://codelabs.developers.google.com/codelabs/webrtc-web/#0">https://codelabs.developers.google.com/codelabs/webrtc-web/#0</a>
            </blockquote>

            <section class="experiment">
            <h2>Getting started — You'll</h2>
            <ol>
                <li>Get access to file using input—type=file</li>
                <li>Read file as Data-URL using FileReader API</li>
                <li>Define chunk length i.e. 1000 chars — to make sure it should work on chrome</li>
                <li>Get first chunk accordingly; transmit and continue...</li>
            </ol>
            
            </section>
            
            <section class="experiment">

            <h2>First step: Getting access to file using INPUT-File element</h2>
            <pre class="sh_javascript">
document.querySelector('input[type=file]').onchange = function() {
    var file = this.files[0];
};</pre>

            </section>
            
            <section class="experiment">

            <h2>Second step: Reading file as Data-URL using FileReader API</h2>
            <pre class="sh_javascript">
var reader = new window.FileReader();
reader.readAsDataURL(file);
reader.onload = onReadAsDataURL;</pre>

            </section>
            
            <section class="experiment">

            <h2>Third step: Defining chunk length</h2>

            <pre class="sh_javascript">
var chunkLength = 1000;</pre>

            </section>
            
            <section class="experiment">

            <h2>Fourth step: Getting chunk and transmitting...</h2>

            <pre class="sh_javascript">
function onReadAsDataURL(event, text) {
    var data = {}; // data object to transmit over data channel

    if (event) text = event.target.result; // on first invocation

    if (text.length > chunkLength) {
        data.message = text.slice(0, chunkLength); // getting chunk using predefined chunk length
    } else {
        data.message = text;
        data.last = true;
    }

    dataChannel.send(data); // use JSON.stringify for chrome!

    var remainingDataURL = text.slice(data.message.length);
    if (remainingDataURL.length) setTimeout(function () {
        onReadAsDataURL(null, remainingDataURL); // continue transmitting
    }, 500)
}</pre>

            </section>
            
            <section class="experiment">

            <h2>Fifth step: Receive chunks; store in array and...</h2>

            <pre class="sh_javascript">
var arrayToStoreChunks = [];
dataChannel.onmessage = function (event) {
    var data = JSON.parse(event.data);

    arrayToStoreChunks.push(data.message); // pushing chunks in array

    if (data.last) {
        saveToDisk(arrayToStoreChunks.join(''), 'fake fileName');
        arrayToStoreChunks = []; // resetting array
    }
};</pre>

            </section>
            
            <section class="experiment">

            <h2>Sending/Receiving files using Firefox</h2>

            <pre class="sh_javascript">
document.querySelector('input[type=file]').onchange = function () {
    var file = this.files[0];
    dataChannel.send(file);
};

dataChannel.onmessage = function (event) {
    var blob = event.data; // Firefox allows us send blobs directly

    var reader = new window.FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function (event) {
        var fileDataURL = event.target.result; // it is Data URL...can be saved to disk
        SaveToDisk(fileDataURL, 'fake fileName');
    };
};</pre>

            </section>
            
            <section class="experiment">

            <h2>SaveToDisk function — old syntax</h2>

            <pre class="sh_javascript">
function saveToDisk(fileUrl, fileName) {
    var save = document.createElement('a');
    save.href = fileUrl;
    save.target = '_blank';
    save.download = fileName || fileUrl;

    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);

    save.dispatchEvent(evt);

    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}</pre>

            </section>
            
            <section class="experiment">

            <h2>SaveToDisk function — new syntax</h2>

            <pre class="sh_javascript">
function saveToDisk(fileUrl, fileName) {
    var save = document.createElement('a');
    save.href = fileUrl;
    save.target = '_blank';
    save.download = fileName || fileUrl;

    var event = document.createEvent('Event');
    event.initEvent('click', true, true);

    save.dispatchEvent(event);
    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}</pre>

            </section>
            
            <section class="experiment">

            <h2>Links</h2>

            <ol>
                <li>
                    <a href="https://www.webrtc-experiment.com/docs/Share-Files-using-Filejs.html">Share files using File.js</a>
                </li>
                <li>
                    <a href="https://www.webrtc-experiment.com/file-hangout/" target="_blank">Share Files / Demo</a>
                </li>

                <li>
                    <a href="https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html" target="_blank">RTCDataChannel APIs for Beginners</a>
                </li>

                <li>
                    <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> — A library for everything!
                </li>
            </ol>
            
            </section>

            <br />
            <br />
            <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
                <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
            
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="https://cdn.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
